<template>
    <div class="clan-law-container">
        <!-- 第一部分：标题和轮播图 -->
        <section class="part part-one">
            <h1 class="main-title">家规</h1>
            <div class="carousel-container">
                <div class="carousel-arrow left-arrow" @click="prevRule">
                    <el-icon>
                        <ArrowLeftBold />
                    </el-icon>
                </div>
                <div class="carousel-content">
                    <transition :name="carouselDirection" mode="out-in">
                        <div class="carousel-card" :key="currentRuleIndex" :style="{ backgroundImage: `url()` }">
                            <div class="card-overlay"></div>
                            <div class="card-content">
                                <h3>家规 {{ currentRuleIndex + 1 }}</h3>
                                <p>{{ rulesCarousel[currentRuleIndex] }}</p>
                            </div>
                        </div>
                    </transition>
                </div>
                <div class="carousel-arrow right-arrow" @click="nextRule">
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
        </section>

        <!-- 第二部分：家风家规家训 -->
        <section class="part part-two">
            <h2 class="sub-title">家风 家规 家训</h2>
            <div class="content-container">
                <!-- 左侧分类 -->
                <div class="categories-sidebar">
                    <div v-for="category in categories" :key="category.id" class="category-item"
                        :class="{ active: selectedCategoryId === category.id }" @click="selectCategory(category.id)">
                        <span class="category-icon">
                            <el-icon v-if="category.id === 1">
                                <HomeFilled />
                            </el-icon>
                            <el-icon v-if="category.id === 2">
                                <Document />
                            </el-icon>
                            <el-icon v-if="category.id === 3">
                                <Notebook />
                            </el-icon>
                        </span>
                        <span class="category-name">{{ category.name }}</span>
                    </div>
                </div>

                <!-- 右侧内容 -->
                <div class="rules-content">
                    <div class="rules-scroll-container">
                        <div v-for="rule in filteredRules" :key="rule.id" class="rule-card">
                            <div class="rule-card-bg"></div>
                            <div class="rule-card-content">
                                <h4>{{ getCategoryName(rule.categoryId) }} #{{ rule.id }}</h4>
                                <p>{{ rule.content }}</p>
                                <div class="rule-footer">
                                    <span class="rule-date">传承自 {{ rule.date }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 第三部分：入口按钮 -->
        <section class="part part-three">
            <div class="entrance-buttons">
                <div class="entrance-button left-button" @click="goToHallOfFame">
                    <div class="button-icon">
                        <el-icon>
                            <StarFilled />
                        </el-icon>
                    </div>
                    <span>本家族名人堂入口</span>
                </div>
                <div class="entrance-button right-button" @click="goToActivities">
                    <div class="button-icon">
                        <el-icon>
                            <Calendar />
                        </el-icon>
                    </div>
                    <span>本家族活动入口</span>
                </div>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import {
    ArrowLeftBold,
    ArrowRightBold,
    HomeFilled,
    Document,
    Notebook,
    StarFilled,
    Calendar
} from '@element-plus/icons-vue'

// 第一部分：轮播家规数据
const rulesCarousel = ref([
    '尊老爱幼，孝悌为先。家庭和睦，邻里友善。',
    '诚实守信，言行一致。言出必行，行出必果。',
    '勤俭持家，杜绝浪费。一粥一饭，当思来之不易。',
    '和睦相处，互帮互助。兄弟同心，其利断金。',
    '勤学上进，光耀门楣。书中自有黄金屋，书中自有颜如玉。',
    '遵纪守法，正直做人。行得正，坐得直，无愧于心。'
])

const currentRuleIndex = ref(0)
const carouselDirection = ref('slide-next')
let carouselInterval: number

const nextRule = () => {
    carouselDirection.value = 'slide-next'
    currentRuleIndex.value = (currentRuleIndex.value + 1) % rulesCarousel.value.length
}

const prevRule = () => {
    carouselDirection.value = 'slide-prev'
    currentRuleIndex.value = (currentRuleIndex.value - 1 + rulesCarousel.value.length) % rulesCarousel.value.length
}

// 第二部分：分类和家规数据
interface Category {
    id: number
    name: string
}

interface Rule {
    id: number
    categoryId: number
    content: string
    date: string
}

const categories = ref<Category[]>([
    { id: 1, name: '家风' },
    { id: 2, name: '家规' },
    { id: 3, name: '家训' }
])

// 生成一些示例日期
const generateDates = () => {
    const dates = []
    const years = ['2020', '2015', '2010', '2005', '2000', '1995', '1990', '1985', '1980']
    for (let i = 0; i < 12; i++) {
        dates.push(`${years[i % years.length]}年`)
    }
    return dates
}

const ruleDates = generateDates()

const rules = ref<Rule[]>([
    { id: 1, categoryId: 1, content: '家风内容：尊老爱幼，家庭和睦。长辈慈爱，晚辈孝顺。', date: ruleDates[0] },
    { id: 2, categoryId: 1, content: '家风内容：诚实守信，言行一致。做人要诚实，做事要守信。', date: ruleDates[1] },
    { id: 3, categoryId: 1, content: '家风内容：勤俭持家，杜绝浪费。勤俭节约是持家之本。', date: ruleDates[2] },
    { id: 4, categoryId: 2, content: '家规内容：每日早起，不睡懒觉。一日之计在于晨。', date: ruleDates[3] },
    { id: 5, categoryId: 2, content: '家规内容：食不言，寝不语。吃饭睡觉要有规矩。', date: ruleDates[4] },
    { id: 6, categoryId: 2, content: '家规内容：尊敬长辈，主动问好。见到长辈要行礼问好。', date: ruleDates[5] },
    { id: 7, categoryId: 3, content: '家训内容：勤学上进，光耀门楣。好好学习，天天向上。', date: ruleDates[6] },
    { id: 8, categoryId: 3, content: '家训内容：遵纪守法，正直做人。不做亏心事，不怕鬼敲门。', date: ruleDates[7] },
    { id: 9, categoryId: 3, content: '家训内容：和睦相处，互帮互助。远亲不如近邻。', date: ruleDates[8] },
    { id: 10, categoryId: 1, content: '家风内容：乐于助人，积善成德。善有善报，恶有恶报。', date: ruleDates[9] },
    { id: 11, categoryId: 2, content: '家规内容：爱护环境，保持整洁。一屋不扫，何以扫天下。', date: ruleDates[10] },
    { id: 12, categoryId: 3, content: '家训内容：知恩图报，不忘根本。饮水思源，知恩图报。', date: ruleDates[11] }
])

const selectedCategoryId = ref<number>(1)

const selectCategory = (categoryId: number) => {
    selectedCategoryId.value = categoryId
}

const filteredRules = computed(() => {
    return rules.value.filter(rule => rule.categoryId === selectedCategoryId.value)
})

const getCategoryName = (categoryId: number) => {
    const category = categories.value.find(c => c.id === categoryId)
    return category ? category.name : ''
}

// 第三部分：入口按钮
const goToHallOfFame = () => {
    // 实际项目中这里应该是路由跳转
    console.log('跳转到名人堂')
    // router.push('/hall-of-fame')
}

const goToActivities = () => {
    // 实际项目中这里应该是路由跳转
    console.log('跳转到活动页面')
    // router.push('/activities')
}

// 生命周期钩子
onMounted(() => {
    // 启动轮播
    carouselInterval = window.setInterval(() => {
        nextRule()
    }, 4000)
})

onUnmounted(() => {
    // 清除轮播定时器
    clearInterval(carouselInterval)
})
</script>

<style scoped lang="scss">
.clan-law-container {
    padding: 20px;
    background: linear-gradient(to bottom, #f9f6f0, #f5efe6); // 渐变米白底色
    min-height: 100vh;
    font-family: "Microsoft YaHei", "SimSun", serif;
}

.part {
    margin-bottom: 50px;
}

// 第一部分样式
.part-one {
    text-align: center;

    .main-title {
        color: #5a3e2f; // 深棕主色
        font-size: 2.8rem;
        margin-bottom: 30px;
        font-weight: bold;
        letter-spacing: 8px;
        text-shadow: 2px 2px 4px rgba(90, 62, 47, 0.2);
        position: relative;
        display: inline-block;

        &::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(to right, #8ba892, #5a3e2f, #8ba892);
            border-radius: 3px;
        }
    }

    .carousel-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        max-width: 800px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(90, 62, 47, 0.25);
    }

    .carousel-arrow {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(245, 239, 230, 0.8); // 半透米色
        border: 2px solid #d6c8b8; // 浅棕边框
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
        z-index: 10;
        margin: 0 15px;

        &:hover {
            background-color: #e4d8c8; // 浅米悬停
            border-color: #8b6152; // 深棕悬停
            transform: scale(1.1);
        }

        :deep(svg) {
            width: 24px;
            height: 24px;
            color: #5a3e2f; // 深棕文字
        }
    }

    .carousel-content {
        flex: 1;
        height: 300px;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
    }

    .carousel-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(90, 62, 47, 0.2), rgba(90, 62, 47, 0.6));
        border-radius: 12px;
    }

    .card-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #f5efe6;
        padding: 20px;
        max-width: 80%;

        h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        p {
            font-size: 1.2rem;
            line-height: 1.6;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
    }
}

// 轮播动画
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
    transition: all 0.6s ease;
}

.slide-next-enter-from {
    transform: translateX(100%);
    opacity: 0;
}

.slide-next-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-prev-enter-from {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-prev-leave-to {
    transform: translateX(100%);
    opacity: 0;
}

// 第二部分样式
.part-two {
    .sub-title {
        color: #5a3e2f; // 深棕主色
        font-size: 2rem;
        text-align: center;
        margin-bottom: 30px;
        font-weight: bold;
        letter-spacing: 4px;
        position: relative;

        &::before,
        &::after {
            content: "※";
            color: #b86d65; // 朱砂红
            margin: 0 15px;
        }
    }

    .content-container {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        gap: 20px;
    }

    .categories-sidebar {
        width: 200px;
        flex-shrink: 0;
        background-color: #fffaf3; // 宣纸底色
        border: 1px solid #d6c8b8; // 浅棕边框
        border-radius: 10px;
        padding: 20px 0;
        box-shadow: 0 4px 12px rgba(90, 62, 47, 0.15);
    }

    .category-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        transition: all 0.3s;
        border-left: 4px solid transparent;

        &:hover {
            background-color: rgba(139, 168, 146, 0.1); // 青绿色淡背景
        }

        &.active {
            background-color: rgba(139, 168, 146, 0.2); // 青绿色背景
            border-left-color: #8ba892; // 青绿色

            .category-name {
                color: #5a3e2f; // 深棕文字
                font-weight: bold;
            }

            .category-icon {
                color: #8b2922; // 暗红色
            }
        }
    }

    .category-icon {
        margin-right: 12px;
        color: #7a9aae; // 青灰色
        font-size: 1.2rem;
    }

    .category-name {
        color: #5a3e2f; // 深棕文字
        font-size: 1.1rem;
    }

    .rules-content {
        flex: 1;
        background-color: #fffaf3; // 宣纸底色
        border: 1px solid #d6c8b8; // 浅棕边框
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(90, 62, 47, 0.15);
    }

    .rules-scroll-container {
        max-height: 500px;
        overflow-y: auto;
        padding-right: 10px;

        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: #f5efe6; // 米白底色
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
            background: #d6c8b8; // 浅棕边框
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #8b6152; // 深棕悬停
        }
    }

    .rule-card {
        position: relative;
        padding: 20px;
        margin-bottom: 20px;
        background-color: rgba(245, 239, 230, 0.7); // 半透米色
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(90, 62, 47, 0.1);
        transition: all 0.3s;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(90, 62, 47, 0.2);
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .rule-card-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background-image: url('@/assets/images/pattern.png');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.1;
    }

    .rule-card-content {
        position: relative;
        z-index: 2;

        h4 {
            color: #8b2922; // 暗红色
            margin-bottom: 10px;
            font-size: 1.1rem;
            border-bottom: 1px dashed #d6c8b8;
            padding-bottom: 8px;
        }

        p {
            color: #5a3e2f; // 深棕文字
            line-height: 1.6;
            margin-bottom: 15px;
            font-size: 1.05rem;
        }
    }

    .rule-footer {
        display: flex;
        justify-content: flex-end;
    }

    .rule-date {
        color: #7a9aae; // 青灰色
        font-size: 0.9rem;
        font-style: italic;
    }
}

// 第三部分样式
.part-three {
    .entrance-buttons {
        display: flex;
        justify-content: space-between;
        max-width: 900px;
        margin: 0 auto;
        gap: 30px;
    }

    .entrance-button {
        flex: 1;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #5a3e2f, #8b6152); // 深棕渐变
        color: #f5efe6; // 米白底色
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 6px 16px rgba(90, 62, 47, 0.3);
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('@/assets/images/pattern-light.png');
            background-size: 200px;
            opacity: 0.1;
        }

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(90, 62, 47, 0.4);

            .button-icon {
                transform: scale(1.2);
            }
        }

        span {
            font-size: 1.2rem;
            font-weight: bold;
            letter-spacing: 1px;
            position: relative;
            z-index: 2;
        }
    }

    .button-icon {
        margin-bottom: 10px;
        transition: all 0.3s;
        position: relative;
        z-index: 2;

        :deep(svg) {
            width: 30px;
            height: 30px;
        }
    }
}

// 响应式设计
@media (max-width: 900px) {
    .part-two {
        .content-container {
            flex-direction: column;
        }

        .categories-sidebar {
            width: 100%;
            display: flex;
            overflow-x: auto;
            padding: 10px 0;

            .category-item {
                flex-direction: column;
                padding: 10px 15px;
                border-left: none;
                border-bottom: 3px solid transparent;

                &.active {
                    border-left-color: transparent;
                    border-bottom-color: #8ba892;
                }
            }

            .category-icon {
                margin-right: 0;
                margin-bottom: 5px;
            }
        }
    }
}

@media (max-width: 768px) {
    .part-one {
        .main-title {
            font-size: 2.2rem;
        }

        .carousel-container {
            flex-direction: column;
            height: auto;
        }

        .carousel-arrow {
            margin: 10px 0;
        }

        .carousel-content {
            height: 250px;
        }
    }

    .part-three {
        .entrance-buttons {
            flex-direction: column;
        }

        .entrance-button {
            height: 100px;
        }
    }
}
</style>